<template>
    <div class="invite-container">
        <van-nav-bar class="title" title="我的邀请码" left-arrow @click-left="onClickLeft"/>
        <div class="invite">
            <h2>邀请码</h2>
            <div class="share">
                <span>{{mobile}}</span>的分享
            </div>
            <div class="link">邀請碼：{{shareCode}}</div>
            <button class="add-btn" v-copy="shareUrl">复制分享链接</button>
            <div class="qrcode-container">
                <!-- <img v-lazy="qrCodeUrl" alt /> -->
                <canvas id="qrcode"></canvas>
                <!-- 2020 521修改 -->
                <!-- <button class="add-btn" @click="saveImg">保存图片</button> -->
                <div class="share">
                    <span>摩城商城</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import QRCode from "qrcode"; //引入生成二维码插件
    import api from "@/utils/restful";

    export default {
        name: "invite",
        data() {
            return {
                mobile: "",
                shareCode: "",
                // qrCodeUrl: "",
                shareUrl: ""
            };
        },
        mounted() {
            this.getShareInfo();
        },
        methods: {
            getShareInfo() {
                this.$axios({
                    method: "post",
                    url: api.share,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    console.log(res);
                    // this.qrCodeUrl = res.qrCodeUrl;
                    this.shareUrl = res.data.shareUrl;
                    this.shareCode = res.data.shareCode;
                    this.mobile = res.data.mobile;
                    this.getQRCode(res.data.shareUrl);
                });
            },
            //生成二维码
            getQRCode(url) {
                var qrcode = document.getElementById("qrcode");
                QRCode.toCanvas(qrcode, url, function (error) {
                    if (error) console.error(error);
                    console.log("QRCode success!");
                });
            },
            // 将canvas生成的二维码保存为图片
            saveImg() {
                var qrcode = document.getElementById("qrcode");
                var a = document.createElement("a");
                a.href = qrcode.toDataURL();
                a.download = "邀请二维码";
                a.click();
            },
            onClickLeft() {
                this.$router.go(-1);
            }
        }
    };
</script>

<style lang="less" scoped>
    @import "~style/common.less";

    .invite-container {
        height: 100vh;
        background-image: url("../../assets/imgList/invite_bg.jpg");
        background-size: contain;

        .invite {
            .flexbox(none, center, column);
            background-color: #fff;
            width: 345px;
            // height: 440px;
            margin: 140px 15px 0;
            border-radius: 15px;

            h2 {
                margin-top: -22px;
                width: 150px;
                height: 45px;
                line-height: 45px;
                text-align: center;
                color: #fff;
                .font-dpr(15px);
                background: rgba(86, 87, 89, 1);
                border-radius: 0.3125rem;
            }

            .share {
                margin-top: 30px;
                color: @fontColorH3;
                .font-dpr(15px);

                span {
                    font-weight: 500;
                    color: @priColor;
                }
            }

            .link {
                margin-top: 24px;
                .font-dpr(18px);
                font-weight: 500;
                text-align: center;
                color: @fontColorH3;
            }

            .add-btn {
                display: block;
                width: 250px;
                height: 40px;
                margin: 20px auto 0;
                background: #eed093;
                border-radius: 20px;
                color: #fff;
                border: none;
                .font-dpr(15px);
            }

            .qrcode-container {
                width: 100%;
                padding-top: 15px;
                .flexbox(space-around, center, column);
                // border-top: 0.0625rem dashed #aaa;
                img {
                    width: 100px;
                    height: 100px;
                }

                .share {
                    margin-top: 12px;
                }
            }
        }
    }
</style>

